<template>
  <div class="personal-main">
    <div class="bd">
      <div class="ui-tab-item active" style="display: block;">
        <div class="repayment-list">
          <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th>还款期数</th>
                <th>还款日期</th>
                <th>应还本金(元)</th>
                <th>应还利息(元)</th>
                <th>状态</th>
                <th>是否逾期</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody class="repayment_content">
              <tr v-for="lendReturn in lendReturnList" :key="lendReturn.id">
                <td>{{ lendReturn.currentPeriod }}</td>
                <td>{{ lendReturn.returnDate }}</td>
                <td class="c-orange">￥{{ lendReturn.principal }}</td>
                <td class="c-orange">￥{{ lendReturn.interest }}</td>
                <td>{{ lendReturn.status === 0 ? '未还款' : '已还款' }}</td>
                <td>
                    <span v-if="lendReturn.overdue">
                      是（逾期金额：{{ lendReturn.overdueTotal }}元）
                    </span>
                  <span v-else>否</span>
                </td>
                <td>
                  <a href="javascript:" @click="commitReturn(lendReturn.id)">
                    {{ lendReturn.status === 0 ? '还款' : '' }}
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNum"
        :page-size="pageSize"
        style="padding: 30px 0; text-align: center"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[2,1, 10, 20]"
        :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 3,
      lendReturnList: [],
      total: 0,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.initData();
    },
    handleCurrentChange(num) {
      this.pageNum = num;
      this.initData();
    },
    commitReturn(lendReturnId) {
      this.$alert(
          '<div style="size: 18px;color: red;">您即将前往汇付宝确认还款</div>',
          '前往汇付宝资金托管平台',
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '立即前往',
            callback: (action) => {
              if (action === 'confirm') {
                let token = localStorage.getItem("FINANCE-TOKEN");
                if (!token) {
                  this.$message.error("请先登录");
                  this.$router.push('/login')
                  return;
                }
                this.$axios
                    .$post('/core/api/lendReturn/commitReturn/' + lendReturnId, {},{headers: {token}})
                    .then((response) => {
                      document.write(response.data)
                    })
              }
            },
          }
      )
    },
    initData() {
      let token = localStorage.getItem("FINANCE-TOKEN");
      if (!token) {
        this.$message.error("请先登录");
        return;
      }
      this.$axios({
        url: `/core/api/lendReturn/list`,
        method: "GET",
        headers: { token },
      }).then((response) => {
        console.log(response.data);
        this.lendReturnList = response.data.data
        this.total = Number(response.data.data.total);
      });
    },
  },
};
</script>